<div class="topControls flex">
  <div class="btnStrip clrSh3">
    <% if (ob.returnText) { %>
    <a class="btn clrP clrBr clrT js-return">
      <span class="ion-chevron-left margRSm"></span>
      <%= ob.returnText %>
    </a>
    <% } %>
  </div>
</div>

<div class="flex gutterH">
  <div class="tabColumn contentBox padMd clrP clrBr clrSh3">
    <div class="boxList tx4 clrTx1Br">
      <%
        [
          {
            key: 'general',
            name: ob.polyT('editListing.sectionNames.general'),
          },
          {
            key: 'photos',
            name: ob.polyT('editListing.sectionNames.photos'),
          },
          {
            key: 'shipping',
            name: ob.polyT('editListing.sectionNames.shipping'),
          },
          {
            key: 'tags',
            name: ob.polyT('editListing.sectionNames.tags'),
          },
          {
            key: 'shippingOrigin',
            name: ob.polyT('editListing.sectionNames.sendLocation'),
          },
          {
            key: 'category',
            name: ob.polyT('editListing.sectionNames.category'),
          },
          {
            key: 'variants',
            name: ob.polyT('editListing.sectionNames.variants'),
          },
          {
            key: 'returnPolicy',
            name: ob.polyT('editListing.sectionNames.returnPolicy'),
          },
          {
            key: 'termsAndConditions',
            name: ob.polyT('editListing.sectionNames.termsAndConditions'),
          },
          {
            key: 'coupons',
            name: ob.polyT('editListing.sectionNames.coupons'),
          },
          {
            key: 'acceptedCurs',
            name: ob.polyT('editListing.sectionNames.acceptedCurrencies'),
          }          
        ].forEach((tab, index) => {
          print(`<a class="js-scrollLink tab row tab-${tab.key} ${ob.selectedNavTabIndex === index ? 'active' : ''}">${tab.name}</a>`)
        });
      %>
    </div>
  </div>
  <div class="flexExpand posR tabContent">
    <div class="gutterVMd2 js-formSectionsContainer">
      <section class="js-scrollToSection contentBox padMd clrP clrBr clrSh3">
        <div class="flexHCent">
          <h2 class="h3 clrT js-listingHeading"><% print(ob.createMode ? ob.polyT('editListing.createListingLabel') : ob.polyT('editListing.editListingLabel')) %></h2>
          <a class="btn clrP clrBAttGrad clrBrDec1 clrTOnEmph modalContentCornerBtn js-save"><%= ob.polyT('settings.btnSave') %></a>
        </div>
        <hr class="clrBr" />

        <div class="tabFormWrapper">
          <form class="box padSmKids padStack">
            <div class="standardTypeWrap js-standardTypeWrap pad0 padSmKids padStackAll">
              <div class="flexRow">
                <div class="col12">
                  <div class="flexRow">
                    <label for="editListingTitle" class="required flexExpand"><%= ob.polyT('editListing.title') %></label>
                    <%= ob.viewListingsT({ createMode: ob.createMode }) %>
                  </div>
                  <% if (ob.errors['item.title']) print(ob.formErrorTmpl({ errors: ob.errors['item.title'] })) %>
                  <input type="text" class="clrBr clrP clrSh2" name="item.title" id="editListingTitle" value="<%= ob.item.title %>" maxLength="<%= ob.max.title %>" placeholder="<%= ob.polyT('editListing.placeholderTitle') %>">
                  <div class="clrT2 txSm helper"><%= ob.polyT('editListing.helperTitle') %></div>
                </div>
              </div>
              <div class="flexRow gutterH">
                <div class="col6 simpleFlexCol">
                  <label for="editContractType" class="required"><%= ob.polyT('editListing.type') %></label>
                  <% if (ob.errors['metadata.contractType']) print(ob.formErrorTmpl({ errors: ob.errors['metadata.contractType'] })) %>
                  <select id="editContractType" name="metadata.contractType" class="clrBr clrP clrSh2 marginTopAuto" style="width: 100%">
                    <% ob.contractTypes.forEach((contractType) => { %>
                    <option value="<%= contractType.code %>" <% if (contractType.code === ob.metadata.contractType) print('selected') %>><%= contractType.name %></option>
                    <% }); %>
                  </select>
                  <div class="clrT2 txSm helper"><%= ob.polyT('editListing.helperType', { smart_count: 4 }) %></div>
                </div>
                <div class="col6 simpleFlexCol">
                  <% // hiding until this is ready on the back end %>
                  <div class="hide">
                    <label for="editListingVisibility" class="required"><%= ob.polyT('editListing.visibility') %></label>
                    <select id="editListingVisibility" class="clrBr clrP clrSh2 marginTopAuto">
                      <option value="hidden">Hidden (doesn't display in store)</option>
                    </select>
                  </div>
                </div>
              </div>
              <div class="flexRow gutterH">
                <div class="col6 simpleFlexCol">
                  <label for="editListingPrice" class="required"><%= ob.polyT('editListing.price') %></label>
                  <%
                    if (ob.errors['item.bigPrice']) print(ob.formErrorTmpl({ errors: ob.errors['item.bigPrice'] }));

                    if (ob.errors['item.pricingCurrency.code']) print(ob.formErrorTmpl({ errors: ob.errors['item.pricingCurrency.code'] }));                    
                  %>
                  <div class="inputSelect marginTopAuto">
                    <input type="text" class="clrBr clrP clrSh2 js-price" name="item.bigPrice" id="editListingPrice" value="<%= ob.number.toStandardNotation(ob.item.bigPrice) %>" placeholder="0.00" data-var-type="bignumber">
                    <select id="editListingCurrency" name="item.priceCurrency.code" class="clrBr clrP nestInputRight">
                      <% ob.currencies.forEach((currency) => {%>
                      <option value="<%= currency.code %>" data-name="<%= currency.name %>" <% if (currency.code === ob.listingCurrency) print('selected'); %>><%= currency.code %></option>
                      <% }); %>
                    </select>
                  </div>
                  <%
                    const supportedWalletCurs = ob.crypto.supportedWalletCurs()
                      .map(cur => ob.crypto.ensureMainnetCode(cur));
                    const helperCryptoCurCode = supportedWalletCurs.includes('BTC') ?
                      'BTC' : supportedWalletCurs.sort()[0] || 'EUR';
                    const helperCryptoCurName =
                      ob.polyT(`cryptoCurrencies.${helperCryptoCurCode}`,
                        ob.polyT(`currencies.${helperCryptoCurCode}`, { _: helperCryptoCurCode }));
                  %>
                  <div class="clrT2 txSm helper"><%=
                  ob.polyT('editListing.helperPrice', { cur: helperCryptoCurName }) %></div>
                </div>
                <div class="col6 simpleFlexCol conditionWrap">
                  <label for="editListingCondition" class="required"><%= ob.polyT('editListing.condition') %></label>
                  <% if (ob.errors['item.condition']) print(ob.formErrorTmpl({ errors: ob.errors['item.condition'] })) %>
                  <select id="editListingCondition" name="item.condition" class="clrBr clrP clrSh2 marginTopAuto" style="width: 100%">
                    <% ob.conditionTypes.forEach((conditionType) => { %>
                    <option value="<%= conditionType.code %>" <% if (conditionType.code === ob.item.condition) print('selected') %>><%= conditionType.name %></option>
                    <% }); %>
                  </select>
                  <div class="clrT2 txSm helper"><%= ob.polyT('editListing.helperCondition') %></div>
                </div>
              </div>
            </div>
            <div class="cryptoTypeWrap js-cryptoTypeWrap pad0"></div>
            <div class="flexRow gutterH skuMatureContentRow js-skuMatureContentRow">
              <div class="col6 simpleFlexCol js-skuFieldContainer"></div>
              <div class="col6 simpleFlexCol">
                <label><%= ob.polyT('editListing.nsfwLabel') %></label>
                <% if (ob.errors['item.nsfw']) print(ob.formErrorTmpl({ errors: ob.errors['item.nsfw'] })) %>
                <div class="btnStrip">
                  <div class="btnRadio clrBr">
                    <input type="radio"
                           name="item.nsfw"
                           value="true"
                           id="editListingNSFWInputTrue"
                           data-var-type="boolean"
                    <% if(ob.item.nsfw) { %>checked<% } %>>
                    <label for="editListingNSFWInputTrue"><%= ob.polyT('editListing.nsfwYes') %></label>
                  </div>
                  <div class="btnRadio clrBr">
                    <input type="radio"
                           name="item.nsfw"
                           value="false"
                           id="editListingNSFWInputFalse"
                           data-var-type="boolean"
                    <% if(!ob.item.nsfw) { %>checked<% } %>>
                    <label for="editListingNSFWInputFalse"><%= ob.polyT('editListing.nsfwNo') %></label>
                  </div>
                </div>
                <div class="clrT2 txSm helper"><%= ob.polyT('editListing.helperNSFW') %></div>
              </div>
            </div>
            <div class="flexRow gutterH">
              <div class="col12">
                <label for="editListingDescription"><%= ob.polyT('editListing.description') %></label>
                <% if (ob.errors['item.description']) print(ob.formErrorTmpl({ errors: ob.errors['item.description'] })) %>
                <div contenteditable class="clrBr clrSh2" name="item.description" id="editListingDescription" placeholder="<%= ob.polyT('editListing.placeholderDescription') %>"><%= ob.item.description %></div>
              </div>
            </div>
          </form>
        </div>
      </section>

      <section class="js-scrollToSection photoUploadSection contentBox padMd clrP clrBr clrSh3 tx3">
        <div class="overflowAuto">
          <h2 class="h4 clrT required"><%= ob.polyT('editListing.sectionNames.photos') %></h2>
          <div class="js-photoUploadingLabel floR <% if (!ob.photoUploadInprogress) print('hide') %>"><%= ob.polyT('editListing.uploading') %> <a class="js-cancelPhotoUploads"><%= ob.polyT('editListing.btnCancelUpload') %></a></div>
          <hr class="clrBr rowMd" />
        </div>
        <% if (ob.errors['item.images']) print(ob.formErrorTmpl({ errors: ob.errors['item.images'] })) %>
        <input type="file" id="inputPhotoUpload" accept="image/*" class="hide" multiple>
        <ul class="unstyled uploadItems clrBr rowSm js-photoUploadItems">
          <li class="addElement tile js-addPhotoWrap">
            <span class="imagesIcon ion-images clrT4"></span>
            <button class="btn clrP clrBr clrT tx6 js-addPhoto"><%= ob.polyT('editListing.btnAddPhoto') %></button>
          </li>
          <% ob.item.images.forEach(image => {
              print(ob.uploadPhotoT(Object.assign(image, { closeIconClass: 'js-removeImage' })))
            });
          %>
        </ul>
        <div class="clrT2 txSm helper"><%= ob.polyT('editListing.helperPhotos', { maxPhotos: ob.max.photos }) %></div>
      </section>

      <section class="js-scrollToSection js-sectionShipping shippingSection">
        <div class="gutterVMd">
          <div class="js-shippingOptionsWrap shippingOptionsWrap gutterVMd"></div>
          <div class="contentBox padMd clrP clrBr clrSh3 tx3 shipOptPlaceholder">
            <%
              if (ob.errors['shippingOptions']) print(ob.formErrorTmpl({
                errors: ob.errors['shippingOptions'],
                class: 'topLevelShipOptErrs'
              })) %>
            <h2 class="h4 clrT js-addShipOptSectionHeading"><%= ob.polyT('editListing.shippingOptions.optionHeading', { listPosition: ob.shippingOptions.length + 1 }) %></h2>
            <hr class="clrBr rowMd" />
            <a class="btn clrBr clrP clrSh2 rowSm js-addShippingOption"><%= ob.polyT('editListing.shippingOptions.btnAddShippingOption') %></a>
            <div class="clrT2 txSm helper"><%= ob.polyT('editListing.helperShipping') %></div>
          </div>
        </div>
      </section>

      <section class="js-scrollToSection tagsSection contentBox padMd clrP clrBr clrSh3 tx3">
        <h2 class="h4 clrT"><%= ob.polyT('editListing.sectionNames.tagsDetailed') %></h2>
        <hr class="clrBr rowMd" />
        <% if (ob.errors['item.tags']) print(ob.formErrorTmpl({ errors: ob.errors['item.tags'] })) %>
        <div class="js-maxTagsWarning"><% if (ob.item.tags.length >= ob.max.tags) print(ob.maxTagsWarning) %></div>
        <input type="text" id="editListingTags" name="item.tags" class="clrBr clrP hashPrefacedTags hideDropDown" value="<%= ob.item.tags.join(ob.tagsDelimiter) %>" placeholder="<%= ob.polyT('editListing.tagsPlaceholder') %>" />
        <div class="clrT2 txSm helper"><%= ob.polyT('editListing.helperTags') %></div>
      </section>

      <section class="js-scrollToSection contentBox padMd clrP clrBr clrSh3 tx3 js-sectionShippingFrom shippingFromSection">
        <h2 class="h4 clrT"><%= ob.polyT('editListing.sectionNames.sendLocation') %></h2>
        <hr class="clrBr rowMd" />
        <% if (ob.errors['item.sendLocation']) print(ob.formErrorTmpl({ errors: ob.errors['item.sendLocation'] })) %>
        <div class="flexRow gutterH">
          <div class="col6">
            <label><%= ob.polyT('editListing.sendLocation.shippingFromPostalCodeLabel') %></label>
          </div>
          <div class="col6">
            <label><%= ob.polyT('editListing.sendLocation.shippingFromCountryCodeLabel') %></label>
          </div>
        </div>

        <div class="flexRow gutterH">
          <div class="col6 simpleFlexCol">
            <input type="text" class="clrBr clrP clrSh2 shippingFromPostalCodeInput js-shippingFromPostalCodeInput" name="metadata.shippingFromPostalCode" value="<%= ob.metadata.shippingFromPostalCode %>" placeholder="<%= ob.polyT('editListing.sendLocation.shippingFromPostalCodePlaceholder') %>" maxlength="<%= ob.max.shippingFromPostalCode %>">
          </div>
          <div class="col6 simpleFlexCol">
            <select id="editListingCountrySelect" name="metadata.shippingFromCountryCode" class="clrBr clrP clrSh2 marginTopAuto" style="width: 100%">
              <option selected value><%= ob.polyT('editListing.sendLocation.shippingFromCountryCodePlaceholder') %></option>
              <% ob.countryList.forEach((country) => { %>
              <option value="<%= country.dataName %>" <% if (country.dataName == ob.metadata.shippingFromCountryCode) print('selected') %>><%= country.name %></option>
              <% }); %>
            </select>
          </div>
        </div>

      </section>

      <section class="js-scrollToSection categorySection contentBox padMd clrP clrBr clrSh3 tx3">
        <h2 class="h4 clrT"><%= ob.polyT('editListing.sectionNames.categoryDetailed') %></h2>
        <hr class="clrBr rowMd" />
        <% if (ob.errors['item.categories']) print(ob.formErrorTmpl({ errors: ob.errors['item.categories'] })) %>
        <div class="js-maxCatsWarning"><% if (ob.item.categories.length >= ob.max.cats) print(ob.maxCatsWarning) %></div>
        <input type="text" id="editListingCategories" name="item.categories" class="clrBr clrP hideDropDown" value="<%= ob.item.categories.join(ob.tagsDelimiter) %>" placeholder="<%= ob.polyT('editListing.categoryPlaceholder') %>" />
      </section>

      <section class="js-scrollToSection js-variantsSection variantsSection contentBox padMd clrP clrBr clrSh3 tx3 <% ob.item.options.length && print('expandedVariantsView') %>">
        <h2 class="h4 clrT"><%= ob.polyT('editListing.sectionNames.variantsDetailed') %></h2>
        <hr class="clrBr rowMd" />
        <div class="js-variantsContainer variantsContainer"></div>
        <a class="btn clrP clrBr clrSh2 addFirstVariant js-addFirstVariant"><%= ob.polyT('editListing.variants.btnAddVariant') %></a>
      </section>

      <section class="contentBox padMd clrP clrBr clrSh3 tx3 js-inventoryManagementSection inventoryManagementSection"></section>

      <section class="contentBox variantInventorySection js-variantInventorySection padMd clrP clrBr clrSh3 tx3 <% if (!ob.shouldShowVariantInventorySection) print('hide') %>">
        <h2 class="h4 clrT"><%= ob.polyT('editListing.sectionNames.variantInventory') %></h2>
        <hr class="clrBr rowMd">
        <% if (ob.errors['item.skus']) print(ob.formErrorTmpl({ errors: ob.errors['item.skus'] })) %>
        <div class="js-variantInventoryTableContainer"></div>
      </section>

      <section class="js-scrollToSection contentBox padMd clrP clrBr clrSh3 tx3">
        <h2 class="h4 clrT"><%= ob.polyT('editListing.sectionNames.returnPolicy') %></h2>
        <hr class="clrBr rowMd" />
        <% if (ob.errors['refundPolicy']) print(ob.formErrorTmpl({ errors: ob.errors['refundPolicy'] })) %>
        <a class="btn clrP clrBr clrSh2 js-addReturnPolicy rowSm <% ob.expandedReturnPolicy && print('hide') %>"><%= ob.polyT('editListing.btnAddReturnPolicy') %></a>
        <textarea rows="8" name="refundPolicy" class="clrBr clrP clrSh2 <% !ob.expandedReturnPolicy && print('hide') %>" id="editListingReturnPolicy" placeholder="<%= ob.polyT('editListing.placeholderReturnPolicy') %>"><%= ob.refundPolicy %></textarea>
        <div class="clrT2 txSm helper"><%= ob.polyT('editListing.helperReturnPolicy') %></div>
      </section>

      <section class="js-scrollToSection contentBox padMd clrP clrBr clrSh3 tx3">
        <h2 class="h4 clrT"><%= ob.polyT('editListing.sectionNames.termsAndConditions') %></h2>
        <hr class="clrBr rowMd" />
        <% if (ob.errors['termsAndConditions']) print(ob.formErrorTmpl({ errors: ob.errors['termsAndConditions'] })) %>
        <a class="btn clrP clrBr clrSh2 js-addTermsAndConditions rowSm <% ob.expandedTermsAndConditions && print('hide') %>"><%= ob.polyT('editListing.btnTermsAndConditions') %></a>
        <textarea rows="8" name="termsAndConditions" class="clrBr clrP clrSh2 <% !ob.expandedTermsAndConditions && print('hide') %>" id="editListingTermsAndConditions" placeholder="<%= ob.polyT('editListing.placeholderTerms') %>"><%= ob.termsAndConditions %></textarea>
        <div class="clrT2 txSm helper"><%= ob.polyT('editListing.helperTerms') %></div>
      </section>

      <section class="js-scrollToSection contentBox padMd clrP clrBr clrSh3 tx3 couponsSection js-couponsSection <% ob.coupons.length && print('expandedCouponView') %>">
        <h2 class="h4 clrT"><%= ob.polyT('editListing.sectionNames.coupons') %></h2>
        <hr class="clrBr rowMd" />
        <%
          if (ob.errors['coupons']) {
            print(ob.formErrorTmpl({ errors: ob.errors['coupons'] }));
          }
        %>        
        <div class="js-couponsContainer couponsContainer"></div>
        <a class="btn clrP clrBr clrSh2 btnAddCoupon js-btnAddCoupon"><%= ob.polyT('editListing.btnAddCoupon') %></a>
      </section>

      <section class="js-scrollToSection contentBox padMd clrP clrBr clrSh3 tx3 acceptedCurrenciesSection">
        <h2 class="h4 clrT"><%= ob.polyT('editListing.sectionNames.acceptedCurrencies') %></h2>
        <hr class="clrBr rowMd" />
        <%
          if (ob.errors['metadata.acceptedCurrencies'] &&
            ob.metadata.contractType !== 'CRYPTOCURRENCY') {
            print(ob.formErrorTmpl({ errors: ob.errors['metadata.acceptedCurrencies'] }));
          }
        %>
        <div class="js-cryptoCurSelectContainer rowSm"></div>
        <div class="clrT2 txSm helper"><%= ob.polyT('editListing.helperAcceptedCurrencies') %></div>
      </section>      

      <div class="contentBox padMd clrP clrBr clrSh3">
        <div class="flexHRight flexVCent gutterH">
          <%= ob.viewListingsT({ createMode: ob.createMode }) %>
          <a class="btn clrP clrBAttGrad clrBrDec1 clrTOnEmph js-save"><%= ob.polyT('settings.btnSave') %></a>
        </div>
      </div>
    </div>
  </div>
</div>
